let $ = ele => ele[0]==="#" ? document.querySelector(ele) : document.querySelectorAll(ele)
let c = ele => document.createElement(ele)

let ajax_get = (url,data) => {
    return new Promise((resolve)=>{
        new ajax({
            url,
            method:"get",
            data
        }).done(res=>{ resolve(res) })
    })
}
let ajax_post = (url,data) => {
    return new Promise((resolve)=>{
        new ajax({
            url,
            method:"post",
            data
        }).done(res=>{ resolve(res) })
    })
}

let create_table = arr => {
    create_pagination(arr[0].total_count)
    arr = arr.slice(1)
    $("#tb").innerHTML = ""
    // 遍历数组
    for( let obj of arr ){
        // 创建行
        let tr = c("tr")
        // 创建td
        let td_id = c("td")
        let td_err_name = c("td")
        let td_err_content = c("td")
        let td_done = c("td")
        let td_ope = c("td")

        // 往td中放入内容
        td_id.innerText = obj.id
        td_err_name.innerText = obj.error_name
        td_err_content.innerText = obj.error_content
        td_done.innerText = obj.done == 1 ? "理解" : "不理解"
        tr.className = obj.done == 1 ? "text-success" : "text-danger"

        // 创建更新按钮
        let update_btn = c("input")
        update_btn.type = "button"
        update_btn.value = "更新状态"
        update_btn.className = "btn btn-warning"
        update_btn.onclick = function(){
            ajax_post("./api/update_data.php",{
                _id:obj.id,
                _done:obj.done == 1 ? 0 : 1
            }).then(data=>{
                if( JSON.parse(data).ok ){
                    // table重新渲染
                    ajax_get("./api/get_data.php",{page_num:localStorage.getItem("page_num")}).then(data=>{
                        let arr = JSON.parse( data )
                        create_table(arr)
                    })
                }else{
                        alert("更新失败")
                }
            })
        }
        // 创建删除按钮
        let del_btn = c("input")
        del_btn.type = "button"
        del_btn.value = "删除"
        del_btn.className = "btn btn-danger"
        del_btn.onclick = function(){
            ajax_post("./api/delete_data.php",{_id:obj.id}).then(data=>{
                if( JSON.parse(data).ok ){
                        // table重新渲染
                        ajax_get("./api/get_data.php",{page_num:localStorage.getItem("page_num")}).then(data=>{
                            let arr = JSON.parse( data )
                            create_table(arr)
                        })
                }else{
                    alert("删除失败")
                }
            })
        }

        td_ope.appendChild(update_btn)
        td_ope.appendChild(document.createTextNode(" "))
        td_ope.appendChild(del_btn)

        // 将td放入tr中
        tr.appendChild( td_id )
        tr.appendChild( td_err_name )
        tr.appendChild( td_err_content )
        tr.appendChild( td_done )
        tr.appendChild( td_ope )

        $("#tb").appendChild(tr)
    }
}

// 创建分页器
let create_pagination = count => {
    $("#pagination-box").innerHTML = ""
    let co = Math.ceil(count/10)
    for( let i=0;i<co;i++ ){
        let page_btn = c("div")
        page_btn.innerText = i+1
        page_btn.className = localStorage.getItem("page_num") == i ? "page-btn active" : "page-btn"
        page_btn.onclick = function(){
            localStorage.setItem("page_num",i)
            // table重新渲染
            ajax_get("./api/get_data.php",{page_num:localStorage.getItem("page_num")}).then(data=>{
                let arr = JSON.parse( data )
                create_table(arr)
            })
        }
        $("#pagination-box").appendChild(page_btn)
    }
}